<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:acm="http://java.sun.com/jsf/composite/comp">

<ui:composition>
	<script type="text/javascript">  
	     jQuery.noConflict();  
 	</script>
	<header>
		<div class="row-1">
			<c:if test="#{not empty hmpCtrl.dealer.logo}">
				<a class="logo" style="padding-top:8px;" href="#{facesContext.externalContext.requestContextPath}">
	   				<h:graphicImage value="/img/?imgId=#{hmpCtrl.dealer.logo.imageId}" height="120" width="280" rendered="#{not empty hmpCtrl.dealer.logo}"/>   				
	   			</a>
   			</c:if>
   			<c:if test="#{empty hmpCtrl.dealer.logo}">
	       		<h1>
	       			<a class="logo" href="#{facesContext.externalContext.requestContextPath}">
	       				<h:outputText value="#{hmpCtrl.dealer.clientName}" rendered="#{empty hmpCtrl.dealer.logo}"/>	
	       			</a>
	       		</h1>
       		</c:if>
        	<div class="extra-box">
            	<ul class="sub-menu">
                	<c:if test="#{hmpCtrl.dealer==null}"><li><a href="#">Register </a></li></c:if>
                	<c:if test="#{authorizedUser!=null}">
                		<li>
                			Welcome 
                			<a href="#{facesContext.externalContext.requestContextPath}/sec/usm/userEdit.jsf?userId=#{authorizedUser.userInfoId}">
                				<strong>#{authorizedUser.firstName}&nbsp;#{authorizedUser.lastName}</strong>
                			</a>
                		</li>
                	</c:if>
                    <li>
	                    <h:outputLink value="#" id="ll" rendered="#{authorizedUser==null}">
	                    	<rich:componentControl event="click" operation="show" target="lp" />
				            <strong>Sign In</strong>
	                    </h:outputLink>
	                    <h:form rendered="#{authorizedUser!=null}">
	                    	<h:commandLink action="#{loginCtrl.logout}" immediate="true">
	                    		Sign Out
	                    	</h:commandLink>
	                    </h:form>                    
                    </li>
                    <li><a href="#">Help </a></li>
                </ul>
            </div>
			
			<rich:popupPanel id="lp" autosized="true" modal="true" width="300" height="150" header="Login">
				<h:form id="LoginForm" styleClass="centerAlign">
					<rich:notifyMessages stayTime="6000" nonblocking="true" showCloseButton="true"/>
			        <h:panelGrid columns="2" width="100%" columnClasses="rightAlign boldFont col-padding, leftAlign col-padding">
			            <h:outputText value="User Name" />
			            <h:inputText value="#{loginCtrl.userName}" required="true" label="User Name"/>
			            <h:outputText value="Password" />
			            <h:inputSecret value="#{loginCtrl.password}" />
			        </h:panelGrid>
			        <acm:spacer height="10"/>
			        <h:panelGrid columns="2" width="100%" columnClasses="rightAlign col-padding, leftAlign col-padding">
				        <h:commandButton styleClass="button1" value="Sign In" action="#{loginCtrl.login}">
				        </h:commandButton>
				        <a4j:commandButton styleClass="button1" value="Cancel" onclick="#{rich:component('lp')}.hide(event); return false;">
				        </a4j:commandButton>
        			</h:panelGrid>
		        </h:form>		        
		    </rich:popupPanel>
		    
            <!--<div class="extra-box">
            	<ul class="sub-menu">
                	<li><a href="#">Buying </a></li>
                    <li><a href="#">Selling </a></li>
                    <li><a href="#">Finance </a></li>
                    <li><a href="#">Insurance </a></li>
                    <li><a href="#">News and Reviews </a></li>
                    <li><a href="#">Support </a></li>
                </ul>
            </div>

        --></div>

        <div class="row-2">
        	<nav class="wrapper">
            	<ul class="menu">
            		<ui:repeat var="cat" value="#{hmpCtrl.menuGroup}">
            			<h:panelGroup rendered="#{!cat.authRequired}">
            				<li><a class="#{hmpCtrl.activeMenu == cat.name ? 'active' : ''}" href="#{facesContext.externalContext.requestContextPath}#{cat.miscData}">#{cat.name}</a></li>
            			</h:panelGroup>
            			<h:panelGroup rendered="#{cat.authRequired and authorizedUser!=null}">
            				<li><a class="#{hmpCtrl.activeMenu == cat.name ? 'active' : ''}" href="#{facesContext.externalContext.requestContextPath}#{cat.miscData}">#{cat.name}</a></li>
            			</h:panelGroup>            		                	       		                	
                    </ui:repeat>                    
                </ul>
            </nav>
        </div>
	</header>
</ui:composition>
</html>